<template>
	<div class="pages">
		<!-- <img src="../../assets/images/bg.png" style="width: 100%;height:100vh;" /> -->

		<div class="content">
			<div style="width: 80%;margin: auto;padding: 80px;" class="flex flex-row-between flex-col-center">
				<div>
					<img src="@/assets/images/regist_bg.png" style="width: 380px;height: 340px;" />
				</div>
				<div>
					<baseBlock bgColor='#333' color='#333333' title="驾考考试平台系统" row="heng" :Left='20' :bottom='40' :fontSize="40"></baseBlock>
					<el-form :model="ruleForm" :rules="rules" ref="ruleForm"  >
						<div style="width: 400px;">
							<el-form-item label="" prop="account">
								<div class="flex  flex-col-center " style="border-bottom: 1px solid #EFEFEF;">
									<i class="el-icon-user u-font-20" style="color:#3CB4FE ;"></i>
									<el-input v-model="ruleForm.account" placeholder="请输入您的账号"></el-input>
								</div>
							</el-form-item>
							<el-form-item label="" prop="password">
								<div class="flex  flex-col-center" style="border-bottom: 1px solid #EFEFEF;">
									<i class="el-icon-lock u-font-20" style="color:#3CB4FE ;"></i>
									<el-input type='password'  v-model="ruleForm.password" placeholder="请输入您的登录密码"></el-input>
								</div>
							</el-form-item>
							
						</div>
						<!-- <el-form-item prop="isRead">
							<el-checkbox v-model="ruleForm.isRead" name="type"></el-checkbox>
							<span class="u-margin-left-10">
								我已阅读并同意
								<span style="color: #1480F9;">《用户隐私协议及条款》</span>
							</span>
						</el-form-item> -->
						<div style="width: 400px;margin-top: 40px ;">
							<el-button round type="primary" @click="submitForm('ruleForm')">立即登录
							</el-button>
						</div>
						
					</el-form>
				</div>
				
				
			

				

			</div>

		</div>
	</div>
</template>

<script>
	  import {
	    mapState,
	    mapMutations
	  } from 'vuex';
	
	export default {
		data() {
			var checkRead = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('请勾选阅读用户隐私协议'));
				} else {
					callback();
				}

			};
			return {
				ruleForm: {
					account: '',
					password: '',
					
				},
				rules: {
					account: [{
							required: true,
							message: '请输入账号',
							trigger: 'blur'
						},
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 3,
							message: '密码太短了',
							trigger: 'blur'
						}
					],
					isRead: [{
						validator: checkRead,
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			...mapMutations(['ADD_USER']),
			submitForm(formName) {

				this.$refs[formName].validate((valid) => {
					if (valid) {
						
						this.axios.post("/index/login", this.ruleForm).then(res => {
							if(res){
								this.ADD_USER(res);
								this.$message.success({
									message: "登录成功",
									onClose: (res) => {
										this.$router.push({
											path: "/select"
										}, () => {
											// location.reload()
										});
									}
								})
							}
						 
						  })
						  .catch(error => {})
						
						
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			}
		}
	}
</script>

<style scoped="scoped">
	.pages {
		overflow: hidden;
		background: linear-gradient(top, #008EFF,#17C5FF);
		width: 100%;
		height: 100vh;
	}

/* 	.el-input {
		width: 60%;

	}
 */
	/deep/ .el-input__inner {
		/* background: #F8FAFF;
		border-radius: 20px; */
		border: 0;
	}


	.el-button {
		width: 100%;
		padding: 20px 0;
		border-radius: 40px;

	}

	.content {
		width: 1200px;
		padding: 40px 0;
		background: rgba(255, 255, 255, 1);
		box-shadow: 8px 0px 20px rgba(147, 146, 146, 0.1);

		border-radius: 30px;
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
</style>
